<template>
    <div class="right">
        <div class="header">会员中心－个人中心</div>
        <div class="content" v-loading="loading">
            <div class="left">
                <img class="img" :src="infos?.avatarImages" alt="">
                <div class="title">
                    <div>修改用户资料</div>
                    <img src="@/assets/修改@2x.png" class="xiugai" alt="" @click="xiugai">
                </div>
                <div class="degnji">
                    <div class="degnji_items">等级: {{ infos?.levelId }}级</div>
                    <div class="degnji_items">积分: {{ infos?.points }}分</div>
                </div>
            </div>
            <div class="right">
                <div class="right_items">
                    <div class="label">姓名:</div>
                    <div class="value">{{ infos?.nickName || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">圈子:</div>
                    <div class="value">{{ infos?.circleCategory || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">网名:</div>
                    <div class="value">{{ infos?.netName || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">生日:</div>
                    <div class="value">{{ infos?.birthday || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">性别:</div>
                    <div class="value">{{ infos?.sex == '0' ? '男' : infos?.sex == '1' ? '女' : '未知' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">学校:</div>
                    <div class="value">{{ infos?.deptName || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">手机:</div>
                    <div class="value">{{ infos?.phonenumber || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">年级:</div>
                    <div class="value">{{ infos?.grade || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">爱好:</div>
                    <div class="value">{{ infos?.hobby || '暂未绑定' }}</div>
                </div>
                <div class="right_items">
                    <div class="label">家长:</div>
                    <div class="value">{{ infos?.parentPhonenumber || '暂未绑定' }}</div>
                </div>
            </div>
            <div class="bottom">
                <div class="header">简介</div>
                <div class="bottom_content">{{ infos?.introduction }}</div>
            </div>
        </div>

        <el-dialog title="修改个人信息" v-model="open" width="600px" append-to-body>
            <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="120px" scroll-to-error>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="头像" prop="avatarImage">
                            <ImageUploadDrags v-model="formData.avatarImage" :limit="1" :format="true" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名" prop="nickName">
                            <el-input clearable placeholder=" 请输入姓名" v-model="formData.nickName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="网名" prop="netName">
                            <el-input clearable placeholder=" 请输入网名" v-model="formData.netName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="formData.sex" clearable filterable>
                                <el-option v-for="item in sys_user_sex" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="手机" prop="phonenumber">
                            <el-input clearable placeholder="请输入手机" v-model="formData.phonenumber" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="生日" prop="birthday">
                            <el-date-picker v-model="formData.birthday" value-format="YYYY-MM-DD" type="date"
                                placeholder="请选择生日" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="学校" prop="deptId">
                            <el-select v-model="formData.deptId" clearable filterable>
                                <el-option v-for="item in schoolColumns" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="年级" prop="grade">
                            <el-select v-model="formData.grade" clearable filterable>
                                <el-option v-for="item in djj_grade" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="圈子" prop="circleCategory">
                            <el-select v-model="formData.circleCategory" clearable filterable multiple>
                                <el-option v-for="item in djj_popularize_type" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="爱好" prop="hobby">
                            <el-input clearable placeholder=" 请输入爱好" v-model="formData.hobby" type="textarea"
                                autosize />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="简介" prop="introduction">
                            <el-input clearable placeholder=" 请输入简介" v-model="formData.introduction" type="textarea"
                                autosize />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="家长" prop="parentPhonenumber">
                            <el-input clearable placeholder="请输入家长" v-model="formData.parentPhonenumber" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(formDataRef)">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { getInfo, optionSchool, updateUserInfo } from '@/api/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex, djj_grade, djj_popularize_type } = toRefs<any>(proxy?.useDict('sys_user_sex', 'djj_grade', 'djj_popularize_type'));
const infos = ref<any>()
const open = ref(false)
const schoolColumns = ref([])
const formDataRef = ref()
const formData = ref({
    avatarImage: '',
    nickName: '',
    netName: '',
    sex: '',
    phonenumber: '',
    birthday: '',
    deptId: '',
    deptName: '',
    grade: '',
    circleCategory: '',
    hobby: '',
    introduction: '',
    parentPhonenumber: '',
})
const loading = ref(false)
const rules = ref<any>({
    nickName: [
        { required: true, message: '请输入姓名', trigger: 'change' },
    ],
    netName: [
        { required: true, message: '请输入网名', trigger: 'change' },
    ],
    phonenumber: [
        { required: false, trigger: 'change' },
        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
    parentPhonenumber: [
        { required: false, trigger: 'change' },
        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
})
onMounted(async () => {
    // 学校
    const schoolres = await optionSchool({})
    schoolres.data.forEach(element => {
        element.label = element.deptName
        element.value = element.deptId
    });
    schoolColumns.value = schoolres.data
    getDetail()
})
/** 获取详情 */
const getDetail = async () => {
    loading.value = true
    const res = await getInfo()
    res.data.user.avatarImages = import.meta.env.VITE_APP_PIC_URL + '/' + res.data.user.avatarImage
    infos.value = res.data.user
    res.data.user.avatarImage = '/' + res.data.user.avatarImage
    // 圈子
    const dats = JSON.parse(JSON.stringify(res.data.user))
    dats.circleCategory = dats.circleCategory.split(',')
    formData.value = dats
    loading.value = false
}
const xiugai = async () => {
    open.value = true
    getDetail()
}
/** 取消 */
const cancel = () => {
    open.value = false
    formData.value = {
        avatarImage: '',
        nickName: '',
        netName: '',
        sex: '',
        phonenumber: '',
        birthday: '',
        deptId: '',
        deptName: '',
        grade: '',
        circleCategory: '',
        hobby: '',
        introduction: '',
        parentPhonenumber: '',
    }
}
/** 确定 */
const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate(async (valid: any, fields: any) => {
        if (valid) {
            const datas = JSON.parse(JSON.stringify(formData.value))
            datas.avatarImage = datas.avatarImage.substring(1)
            datas.circleCategory = datas.circleCategory.join(',')
            datas.deptName = schoolColumns.value.filter(item => {
                if (item.value == datas.deptId) {
                    return item.label
                }
            })[0].label
            await updateUserInfo(datas)
            proxy?.$modal.msgSuccess('修改成功')
            cancel()
            getDetail()
        }
    })
}
</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;

        .left {
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: flex-start;

            .img {
                width: 140px;
                height: 141px;
                border-radius: 50%;
                margin-top: 50px;
            }

            .title {
                width: 100%;
                display: flex;
                align-items: center;
                color: #000000;
                font-size: 14px;
                margin-top: 15px;
                justify-content: center;

                .xiugai {
                    width: 22px;
                    height: 19px;
                    margin-left: 5px;
                    cursor: pointer;
                }
            }

            .degnji {
                width: 100%;
                display: flex;
                align-items: center;
                color: #6A6A6A;
                font-size: 14px;
                margin-top: 30px;
                justify-content: space-around;
            }
        }

        .right {
            width: calc(100% - 400px);
            height: 300px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: center;

            .right_items {
                width: calc(50% - 10px);
                height: 30px;
                text-align: left;
                font-size: 14px;
                border-bottom: 1px solid #E6E6E6;
                line-height: 30px;
                margin-top: 20px;
                display: flex;
                align-items: center;

                .label {
                    color: #000000;
                    width: 40px;
                }

                .value {
                    color: #888888;
                    width: calc(100% - 40px);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .bottom {
            width: 100%;
            height: calc(100% - 300px);

            .bottom_content {
                width: 100%;
                height: calc(100% - 55px);
                box-sizing: border-box;
                padding: 10px;
                font-family: SimSun;
                font-weight: 400;
                font-size: 14px;
                color: #717171;
            }
        }
    }

}
</style>